<template>
	<view class="padding-20">
		<!-- 地图定位 -->
		<view class="padding-20 border-radius10 bg-fff margin-bottom20">
			<view class="fontSize-15 color-000 margin-bottom20">地图定位</view>
			<view class="fontSize-14 color-808080 margin-bottom20">
				<text class="margin-right20">经度:</text>
				<text class="margin-right20">{{addMakerInfo.lat}}</text>
			</view>
			<view class="fontSize-14 color-808080 margin-bottom20">
				<text class="margin-right20">纬度:</text>
				<text class="margin-right20">{{addMakerInfo.lng}}</text>
			</view>
			<view class="fontSize-14 color-808080 margin-bottom20">
				<text class="margin-right20">省市区:</text>
				<text class="margin-right20">{{addMakerInfo.region}}</text>
			</view>
			<view class="fontSize-14 color-808080 margin-bottom20">
				<text class="margin-right20">地址:</text>
				<text class="margin-right20">{{addMakerInfo.location}}</text>
			</view>
		</view>
		<!-- 采集信息 -->
		<view class="border-radius10 bg-fff margin-bottom20" style="padding: 20rpx 20rpx 0 20rpx;">
			<view class="fontSize-15 color-000 margin-bottom20">采集信息</view>
			<view class="flex-alignItems-center f-divider1 padding-bottom20 margin-bottom20">
				<view class="fontSize-14 color-808080 margin-right30">工点编码</view>
				<input type="text" class="input-view-item" v-model="workNo" placeholder="请输入工点编码" />
			</view>
			<view class="flex-alignItems-center f-divider1 padding-bottom20 margin-bottom20">
				<view class="fontSize-14 color-808080 margin-right30">调查轮次</view>
				<input type="text" class="input-view-item" v-model="batch" placeholder="请输入调查轮次" />
			</view>
			<view class="flex-alignItems-center padding-bottom20">
				<view class="fontSize-14 color-808080 margin-right30">风险类型</view>
				<view class="flex-alignItems-center">
					<view class="flex-alignItems-center margin-right20">
						<view class="margin-right10">
							<image class="img-38" v-if="riskType == 'SLOPE'" src="../../static/image/checked.png"
								mode=""></image>
							<image class="img-38" v-else src="../../static/image/check.png" mode=""></image>
						</view>
						<view class="fontSize-14 color-000">崩塌滑坡</view>
					</view>
					<view class="flex-alignItems-center margin-right20">
						<view class="margin-right10">
							<image class="img-38" v-if="riskType == 'DEBRIS'" src="../../static/image/checked.png"
								mode=""></image>
							<image class="img-38" v-else src="../../static/image/check.png" mode=""></image>
						</view>
						<view class="fontSize-14 color-000">泥石流</view>
					</view>
					<view class="flex-alignItems-center">
						<view class="margin-right10">
							<image class="img-38" v-if="riskType == 'SUBSIDE'" src="../../static/image/checked.png"
								mode=""></image>
							<image class="img-38" v-else src="../../static/image/check.png" mode=""></image>
						</view>
						<view class="fontSize-14 color-000">沉陷水毁</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 图片/视频 -->
		<view class="padding-20 border-radius10 bg-fff margin-bottom20">
			<u-tabs :list="imageTabList" @click="handleTabImage"></u-tabs>
			<!-- 全景图 -->
			<template v-if="imageTabIndex == 'slope_evaluation_panorama_pic'">
				<view class="margin-top20">
					<view class="fontSize-14 color-808080 margin-bottom20">上传图片</view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>
			</template>
			<!-- 地理信息 -->
			<template v-if="imageTabIndex == 'slope_evaluation_geography_pic'">
				<view class="margin-top20">
					<view class="fontSize-14 color-808080 margin-bottom20">上传图片</view>
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="10"></u-upload>
				</view>
			</template>
			<!-- 赤平投影 -->
			<template v-if="imageTabIndex == 'slope_evaluation_stereographic_projection'">
				<view class="margin-top20">
					<view class="fontSize-14 color-808080 margin-bottom20">上传图片</view>
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="10"></u-upload>
				</view>
			</template>
			<!-- 病害或局部典型照片 -->
			<template v-if="imageTabIndex == 'slope_evaluation_disease_or_local_typical_pic'">
				<view class="margin-top20">
					<view class="fontSize-14 color-808080 margin-bottom20">上传图片</view>
					<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
						:maxCount="10"></u-upload>
				</view>
			</template>
			<!-- 承灾体典型照片 -->
			<template v-if="imageTabIndex == 'slope_evaluation_bear_body_pic'">
				<view class="margin-top20">
					<view class="fontSize-14 color-808080 margin-bottom20">上传图片</view>
					<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" multiple
						:maxCount="10"></u-upload>
				</view>
			</template>
		</view>

		<!-- 文本域 -->
		<view class="padding-20 border-radius10 bg-fff margin-bottom20">
			<u--textarea v-model="remark" placeholder="请填写文字描述，并从下方标签区域选择相关标签" height="100" maxlength="-1"
				border="none"></u--textarea>
		</view>

		<!-- 标签 -->
		<!-- <view class="padding-20 border-radius10 flex-flex-warp bg-fff margin-bottom20">
			<view class="tags-item flex-center" v-for="(item,index) in remarkTypeList" :key="index"
				@click="chooseTypeItem(item,index)" :class="typeItemIndexList[index] == item?'tags-item1':''">
				{{item}}
			</view>
		</view> -->

		<view style="height: 200rpx;"></view>
		<view class="report-fixed-view flex-alignItems-center padding-30 bg-fff"
			style="box-shadow: 0rpx -1rpx 4rpx 1rpx rgba(0,0,0,0.1);">
			<view class="report-view-btn1 flex-center" @click="SubmitEvent">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addMakerInfo: {}, // 坐标点地址信息
				workNo: '', // 工点编号
				batch: '', // 评价轮次
				riskType: 'SLOPE', // 风险类型
				// 图片分类
				imageTabList: [{
						name: '全景图',
						status: 'slope_evaluation_panorama_pic'
					}, {
						name: '地理信息',
						status: 'slope_evaluation_geography_pic'
					}, {
						name: '赤平投影"',
						status: 'slope_evaluation_stereographic_projection'
					},
					{
						name: '病害或局部典型照片',
						status: 'slope_evaluation_disease_or_local_typical_pic'
					}, {
						name: '承灾体典型照片',
						status: 'slope_evaluation_bear_body_pic'
					}
				],
				imageTabIndex: 'slope_evaluation_panorama_pic',
				fileList1: [], // 全景图图片列表
				fileList2: [], // 地理信息图片列表
				fileList3: [], // 赤平投影图片列表
				fileList4: [], // 病害或局部典型照片图片列表
				fileList5: [], // 承灾体典型照片图片列表
				files:[],// 图片传参
				remark: '', // 备注
				remarkTypeList: [], // 标签列表
				typeItemIndexList: [], // 选择标签
				baseUrlImage: '' ,// 图片域名
				editId:'', // 修改id
				code:'', // 采集编号
				collectTime:'', // 采集时间
			}
		},
		onLoad(e) {
			if(e.id){
			   this.editId = e.id
			   console.log(this.editId)
			   this.getManualCollectOneExt(e.id)
			}
			this.baseUrlImage = this.$api.uploadImage
			this.getDictionaryQuery()
		},
		methods: {
			// 图片回显处理
			getShowImage(res){
				console.log(res)
				let arr1 = []
				let arr2 = []
				let arr3 = []
				let arr4 = []
				let arr5 = []
				res.echoMap.fileIds.forEach(item=>{
					if(item.bizType == 'slope_evaluation_panorama_pic'){
						arr1.push({
							id: item.id,
							status: 'success',
							message: '',
							url: this.baseUrlImage+item.url,
							bizType: item.bizType
						})
					}
					if(item.bizType == 'slope_evaluation_geography_pic'){
						arr2.push({
							id: item.id,
							status: 'success',
							message: '',
							url: this.baseUrlImage+item.url,
							bizType: item.bizType
						})
					}
					if(item.bizType == 'slope_evaluation_stereographic_projection'){
						arr3.push({
							id: item.id,
							status: 'success',
							message: '',
							url: this.baseUrlImage+item.url,
							bizType: item.bizType
						})
					}
					if(item.bizType == 'slope_evaluation_disease_or_local_typical_pic'){
						arr4.push({
							id: item.id,
							status: 'success',
							message: '',
							url: this.baseUrlImage+item.url,
							bizType: item.bizType
						})
					}
					if(item.bizType == 'slope_evaluation_bear_body_pic'){
						arr5.push({
							id: item.id,
							status: 'success',
							message: '',
							url: this.baseUrlImage+item.url,
							bizType: item.bizType
						})
					}
				})
				this.fileList1 = arr1
				this.fileList2 = arr2
				this.fileList3 = arr3
				this.fileList4 = arr4
				this.fileList5 = arr5
			},
			// 获取单个信息
			async getManualCollectOneExt(id){
			    let res = await this.$http.post(this.$api.manualCollectOneExt,{gcj02:true,id:id},{token:true})
				console.log(res)
				this.code = res.data.code
				this.collectTime = res.data.collectTime
				this.addMakerInfo.lat = res.data.lat
				this.addMakerInfo.lng = res.data.lng
				this.addMakerInfo.location = res.data.location
				this.addMakerInfo.region = res.data.region
				this.workNo = res.data.workNo
				this.batch = res.data.batch
				this.riskType = res.data.riskType.code
				this.remark = res.data.remark
				this.getShowImage(res.data)
			},
			// 图片传参处理
			getfilesCode() {
				let imageList = []
				let arr1 = []
				let arr2 = []
				let arr3 = []
				let arr4 = []
				let arr5 = []
				if (this.fileList1.length > 0) {
					arr1 = this.fileList1.map(item => {
						return {
							bizType: item.bizType,
							fileId: item.id
						}
					})
				}
				if (this.fileList2.length > 0) {
					arr2 = this.fileList2.map(item => {
						return {
							bizType: item.bizType,
							fileId: item.id
						}
					})
				}
				if (this.fileList3.length > 0) {
					arr3 = this.fileList3.map(item => {
						return {
							bizType: item.bizType,
							fileId: item.id
						}
					})
				}
				if (this.fileList4.length > 0) {
					arr4 = this.fileList4.map(item => {
						return {
							bizType: item.bizType,
							fileId: item.id
						}
					})
				}
				if (this.fileList5.length > 0) {
					arr5 = this.fileList5.map(item => {
						return {
							bizType: item.bizType,
							fileId: item.id
						}
					})
				}
				imageList = [...arr1,...arr2,...arr3,...arr4,...arr5]
				this.files = imageList
			},
			// 提交
			async SubmitEvent() {
				if (!this.workNo) return this.$tools.toast('请填写工点编号')
				this.getfilesCode()
				let form = {} 
				form.id = this.editId
				form.code = this.code 
				form.collectTime = this.collectTime
				form.attach = true
				form.workNo = this.workNo  // 工点编号
				form.batch = this.batch  // 评价轮次
				form.gcjFlag = true // 是否为火星坐标系
				form.riskType = this.riskType // 风险类型
				form.lat = this.addMakerInfo.lat // 维度
				form.lng = this.addMakerInfo.lng // 经度
				form.location = this.addMakerInfo.address  // 地址
				form.region =  this.addMakerInfo.region//行政区划
				form.remark = this.remark + this.typeItemIndexList.join('') // 备注
				form.files = this.files // 图片
				let res = await this.$http.put(this.$api.manualCollectEdit,form,{token:true})
				if(res.msg == 'ok'){
					this.$tools.toast('提交完成')
					this.$tools.navigateBack(1,200)
				}
			},
			// 选择tabsItem
			chooseTypeItem(item, index) {
				this.$forceUpdate()
				let i = this.typeItemIndexList.indexOf(item)
				// 之前是选中的，取消选中
				if (i > -1) {
					this.typeItemIndexList[i] = ''
				} else {
					// 如果没选中 添加选择数组，选择状态改为选择
					this.typeItemIndexList[index] = item
				}
			},
			// 获取类型
			async getDictionaryQuery() {
				let res = await this.$http.post(this.$api.dictionaryQuery, {
					type: 'HIGH_FREQUENCY'
				}, {
					token: true
				})
				console.log(res)
				let arr = []
				arr = res.data.map(item => {
					return item.name
				})
				this.remarkTypeList = arr
				this.typeItemIndexList = []
				arr.forEach((item, index) => {
					this.typeItemIndexList[index] = ''
				})
			},
			// 选择风险类型
			chooseRiskType(value) {
				this.riskType = value
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						id: result.id,
						status: 'success',
						message: '',
						url: result.url,
						bizType: result.bizType
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$api.upload + 'attachment/upload-image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							tenant: 'MDAwMA==',
							Authorization: 'Basic bGFtcF93ZWI6bGFtcF93ZWJfc2VjcmV0',
							token: 'Bearer ' + uni.getStorageSync('token'),
						},
						formData: {
							bizType: this.imageTabIndex
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							resolve(data.data)
						}
					});
				})
			},
			// 切换图片分类
			handleTabImage(e) {
				this.imageTabIndex = e.status
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 标签
	.tags-item1 {
		padding: 10rpx 20rpx;
		background: #4B6DFD !important;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF !important;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
	}

	.tags-item {
		padding: 10rpx 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		background: #EBEBEB;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		margin: 0 20rpx 20rpx 0rpx;
	}

	// 输入框
	.input-view-item {
		flex: 1;
		text-align: left;
		font-size: 14px;
	}

	// 底部操作栏
	.report-view-btn1 {
		flex: 1;
		height: 90rpx;
		background: #4B6DFD;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		letter-spacing: 10rpx;
	}

	.report-fixed-view {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 95%;
		padding: 20rpx;
	}
</style>